<template>
  <div class="preview-vditor">
    <div v-show="!loading" ref="vditor" id="vditor" class="vditor-preview" />
    <a-spin v-if="loading" tip="Loading...">
      <a-alert
          message="载入中"
          description="初次载入较慢，耐心等待内容加载完毕"
      ></a-alert>
    </a-spin>
   </div>
</template>

<script setup lang="js" >
import useStore from "@/store";
const {webConfig}  = useStore()
const vditor = ref(null);
const online = ref(null)
import VditorPreview from 'vditor/dist/method.min'
// import VditorPreview from '../../../src/assets/vditor/dist/method.min'
import {nextTick, onMounted, reactive, ref, watch} from "vue";
const loading = ref(true);
const { proxy } = getCurrentInstance()
const cdn = import.meta.env.VITE_CDN
const vditorCDN = cdn + '/vditor@3.9.5'
webConfig.$subscribe((mutation, state) => {
  if(state.isDarkColor){
    VditorPreview.setContentTheme("dark",`${vditorCDN}/dist/css/content-theme`)
  }else{
    VditorPreview.setContentTheme("light",`${vditorCDN}/dist/css/content-theme`)
  }
  // initVditor();
})
const prop = defineProps({
  data: {
    type:String,
    required: true,
    default: ''
  }
})

onMounted(() => {
  initVditor()
})

onUnmounted(() => {
  window.removeEventListener('scroll',updateActiveIndex)
})

const initVditor = () => {
  //https://ld246.com/article/1549638745630#options-preview

  // VditorPreview.mermaidRender(document)

  loading.value = true;

  const options = {
    width: '100%',
    mode: "dark" ,
    anchor:0,
    lazyLoadImage:"Loading",
    preview: {
      delay: 1000,
      show: true,
    },
    markdown:{
      paragraphBeginningSpace:true,
      toc:true,
      gfmAutoLink:false,
    },
    theme:{
      current: webConfig.isDarkColor ? "dark" : "light",
      path:`${vditorCDN}/dist/css/content-theme`
    },
    cdn:vditorCDN,
    after:()=>{
      loading.value = false;
      //渲染大纲
      nextTick(() => {
        VditorPreview.setCodeTheme("vs")
        const em = proxy.$emitter.all.has('initOutline')
        // console.log(em)
        if(em)
          proxy.$emitter.emit('initOutline',vditor.value)
      })

      // eventBus.$emit('show-outline', this.$refs.khaleesi)
    }
  }

  VditorPreview.preview(vditor.value,prop.data,options)
 // console.log(document.getElementById("vditorContentTheme"))

  // 监听滚动事件，调用 updateActiveIndex 方法更新活动目录项。
  window.addEventListener('scroll', updateActiveIndex);

}

const updateActiveIndex = () => {

  const headings = vditor.value.querySelectorAll('h1,h2,h3,h4,h5,h6'); // 根据实际情况选择目录项的元素选择器

  let closestHeadingIndex = 0;

  for (let i = headings.length-1; i >=0 ; i--) {
    const elementRect = headings[i].getBoundingClientRect();
    if (elementRect.top <= 100) {
      // console.log('滑动到屏幕顶部的元素：', headings[i]);
      // 执行其他操作...
      closestHeadingIndex = i;
      break;
    }
  }
  //这个h标签应该高亮
  // console.log( headings[closestHeadingIndex].id)
  const em = proxy.$emitter.all.has('onActiveTitle')
  if(em)
    proxy.$emitter.emit('onActiveTitle', headings[closestHeadingIndex].id)
}


</script>

<style lang="scss">
.preview-vditor {
  width: 100%;
  height: 100%;
  word-break: break-all;
  overflow: hidden;
  #khaleesi {
    .vditor-reset{
    }
    height: 100%;
    width: 100%;
    //min-height: 100vh;
    //text-align: left;
    padding: 0 15px 15px 15px;
    //padding: 0 10px 20px 10px;
    //background-color: #2f6ea7;
    //box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

    @media (max-width: 768px) {
      padding: 15px;
      font-size: 14px;
    }

  }

}

</style>

